<template>
<!-- 很多地方要用到，所以作为公共组件 -->
    <div class="comment-area">
        <!-- 发表评论 -->
        <h4>发表评论--{{newsid}}</h4>
        <hr>
        <textarea v-model="commentContent" class="comment-content" placeholder="请输入评论内容，最多120字" maxlength="120"></textarea>
        <mt-button type="primary" size="large" @click="submitComment">发表评论</mt-button>

        <!-- 评论列表 -->
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,index) in commentList" :key="index">
                <div class="cmt-item-header">第{{index+1}}楼&nbsp;用户：{{item.user_name}}&nbsp;发表时间：{{item.add_time | dateFormat}}</div>
                <div class="cmt-item-body">{{item.content}}</div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
    </div>

</template>

<script>
// 用Toast要记得导入
import {Toast} from 'mint-ui'

export default {
    props:['newsid'],
    data:function () {
        return {
            page:1,// 默认展示第一页
            commentList:[],// 评论列表
            commentContent:'',// 评论框内容
        }
    },
    created:function () {
        this.getComments();
    },
    methods:{
        // 获取评论列表
        getComments:async function(){
            const url="/api/getcomments/"+this.newsid+"?pageindex="+this.page;
            const {data}=await this.$http.get(url);
            console.log(this.page);
            console.log(data);
            if(data.status===0) {
                if(!data.message.length){
                    return Toast({
                        message: '没有更多评论了',
                        position: 'center',
                        duration: 2000
                        });
                }
                // 追加数据
                this.commentList=this.commentList.concat(data.message);
            }
        },
        // 加载更多
        loadMore:function () {  
            this.page++;
            this.getComments();
        },
        // 发表评论
        submitComment: async function(){
            if(!this.commentContent.trim().length){
                return Toast({
                    message: '请输入内容',
                    position: 'center',
                    duration: 2000
                    });
            }

            // 发表评论

            // 不这么写，这么写新增内容显示会有问题
            // const url="/api/postcomment/"+this.newsid;
            // const {data} = await this.$http.post(url,{content:this.commentContent.trim()});
            // console.log(data);
            // if(data.status===0) this.getComments();
            this.commentList.unshift({
                add_time:new Date(),
                content:this.commentContent,
                user_name:"匿名用户",
            })
            this.commentContent='';
        }
    }
}
</script>

<style lang="scss" scoped>
.comment-area{
    padding: 5px;
    .comment-content{
        margin-bottom: 0;
    }
    .cmt-list{
        .cmt-item{
            margin: 5px 0;
            .cmt-item-header{
                background-color:rgb(202, 200, 200);
                padding: 0 5px;
                font-size:10px;
                height: 30px;
                line-height: 30px;
            }
            .cmt-item-body{
                margin: 10px 0;
                font-size: 10px;
            }
        }
    }
    

}

</style>